<template>
	<view class="profile">
		<gyd-navbar back-color="#fff" :title="title" :isBack="false">
			<!-- #ifndef MP-WEIXIN -->
			<template #content>
				<view class="actions">
					<view class="actions-item" @click="pageRoute('/servePages/notice/notice')">
						<uni-badge class="uni-badge-left-margin" :text="noticeTotalNum" absolute="rightTop"
							:offset="[3, 12]">
							<uni-icons type="icon-chat" custom-prefix="iconfont"></uni-icons>
						</uni-badge>
					</view>
				</view>
			</template>
			<!-- #endif -->
		</gyd-navbar>

		<view class="card header">
			<view class="user" v-if="!member" @click="goLogin()">
				<image class="avatar" :src="$imageUrl('/static/images/default-avatar.png')" mode="aspectFill"></image>
				<view class="info">
					<view class="name">点击登录</view>
					<view class="invite-person">登录后可使用更多功能</view>
				</view>
			</view>

			<view class="user" v-if="member">
				<image class="avatar" :src="member.avatar" mode="aspectFill"
					@click="pageRoute('/userPages/setting/personal')"></image>
				<view class="info" @click="pageRoute('/userPages/setting/personal')">
					<view class="name">{{member.nickname}}【ID:{{member.id}}】</view>
					<view class="level">代理等级:{{member.agent_level_name}}</view>
					<view class="invite-person" v-if="member.tags">
						标签:{{member.tags}}
					</view>
				</view>
				<!-- <view class="vip" @click="$u.route({url: '/userPages/vip/vip'})">
					<u-icon name="huiyuan" custom-prefix="custom-icon" size="40" color="#d3c237" label="PLUS会员"
						label-color="#d3c237" label-size="24"></u-icon>
				</view> -->
			</view>
			<view class="role">
				<u-select class="user-role" v-model:current="userRole" :options="member.role_list" :label="roleName"
					keyName="id" labelName="name" @select="changeRole" iconColor="#282828"></u-select>
			</view>

			<view class="statis-column">
				<!-- <view class="item" @click="pageRoute('/userPages/wallet/balance')">
					<view class="num">{{member.money}}</view>
					<view class="label">余额(元)</view>
				</view> -->
				<view class="item" @click="pageRoute('/userPages/wallet/income')">
					<view class="num">{{member.income}}</view>
					<view class="label">收益(元)</view>
				</view>
				<!-- <view class="item" @click="pageRoute('/userPages/wallet/commission')">
					<view class="num">{{member.commission}}</view>
					<view class="label">佣金(元)</view>
				</view> -->
				<view class="item" @click="pageRoute('/userPages/coupon/coupon')">
					<view class="num">{{member.coupon}}</view>
					<view class="label">优惠券</view>
				</view>
				<view class="item" @click="pageRoute('/userPages/points/points')">
					<view class="num">{{member.points}}</view>
					<view class="label">积分</view>
				</view>
				<view class="item" @click="pageRoute('/userPages/tickets/tickets')">
					<view class="num">{{member.water_tickets}}</view>
					<view class="label">水票</view>
				</view>
				<view class="item" @click="pageRoute('/userPages/wallet/openingaward')">
					<view class="num">{{member.open_award}}</view>
					<view class="label">开户奖</view>
				</view>
			</view>
		</view>

		<view class="order-con">
			<u-grid class="card" :border="false" :col="5" align="center">
				<u-grid-item class="card-item" v-for="(item,index) in menuList" :key="index"
					@click="pageRoute(item.link)">
					<image :src="$imageUrl(item.image)" mode="aspectFill"></image>
					<text class="grid-text">{{item.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>

		<view class="service-menu">
			<u-cell icon="share-fill" title="客户管理" :isLink="true" url="/userPages/customer/customer"></u-cell>
			<u-cell icon="bookmark-fill" title="排队免单" :isLink="true"
				url="/servePages/free-queuing/free-queuing"></u-cell>
			<u-cell icon="map-fill" title="收货地址" :isLink="true" url="/userPages/address/address"></u-cell>
			<u-cell icon="file-text-fill" title="发票管理" :isLink="true" url="/userPages/invoice/list"></u-cell>
			<u-cell icon="server-fill" title="平台服务" :isLink="true"
				url="/servePages/customer-service/customer-service"></u-cell>
			<u-cell icon="question-circle-fill" title="意见反馈" :isLink="true" url="/userPages/feedback/feedback"></u-cell>
			<u-cell icon="setting-fill" title="系统设置" :isLink="true" url="/userPages/setting/setting"></u-cell>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	// #ifdef H5
	import checkEnvironment from '@/utils/browser.js';
	// #endif
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '我的',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		isMore: true,
		noticeTotalNum: 0,
		member: false,
		userRole: cache.get('userRole', false) || 1,
		roleName: '个人用户',
		menuList: [],
		environment: {
			isWeChat: false,
			isAlipay: false,
			isBrowser: false,
			isDouyin: false,
		}, //浏览器环境
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}

		// 登录成功
		uni.$on('login_success', function() {
			getInfo();
		});
		// 修改用户信息
		uni.$on('edit_userinfo', function() {
			getInfo();
		});
		// 账户变动，转账提现操作
		uni.$on('account_change', function() {
			getInfo();
		});
		// 订单状态改变
		uni.$on('order_status_change', function() {
			getInfo();
		});
		// 支付成功
		uni.$on('pay_ok', function() {
			setTimeout(function() {
				getInfo();
			}, 3000);
		})
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		getInfo();
		getMenuList();
	}

	function getInfo() {
		const isLogin = util.checkLogin();
		console.log('登录状态：', isLogin);
		if (!isLogin) {
			uni.showToast({
				title: "请登录",
				icon: "none",
				duration: 1000,
			});
			cache.logOut();
		}

		request.get('auth/memberInfo', {
			user_role: state.userRole
		}).then(res => {
			console.log('登录用户信息', res);
			state.member = res.data;

			if (state.userRole == 1) {
				state.roleName = '个人用户';
			} else if (state.userRole == 2) {
				state.roleName = '企业用户';
			} else {
				state.roleName = '切换角色';
			}
		});
	}

	function getMenuList() {
		request.get('content/banner', {
			position_id: 15
		}).then(res => {
			console.log('菜单', res);
			state.menuList = res.data;
		})
	}

	// 跳转登录
	function goLogin() {
		// #ifdef MP || APP
		uni.navigateTo({
			url: "/userPages/login/login"
		})
		// #endif

		// #ifdef H5
		state.environment = checkEnvironment();
		if (state.environment.isWeChat) {
			uni.navigateTo({
				url: "/userPages/login/login"
			})
		} else {
			uni.navigateTo({
				url: "/userPages/login/pass_login"
			})
		}
		// #endif
	}

	//切换角色
	function changeRole(e) {
		console.log('切换角色', e);
		state.userRole = e.id;
		state.roleName = e.name;
		cache.set('userRole', e.id);
		getInfo();
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		isMore,
		noticeTotalNum,
		member,
		userRole,
		roleName,
		menuList,
		environment
	} = toRefs(state);
</script>

<style lang="scss">
	.profile {
		padding: $m24;

		.icon-group {
			@include f-center;
			padding-right: $m20;

			.icon-item {
				position: relative;
				padding: $m16 $m4;
			}
		}

		.card {
			margin-bottom: $m24;
			background-color: $u-bg-reverse-color;
			border-radius: $radius-12;

			&.header {
				margin-top: $m24;
				background: url($web_url + '/static/images/bg-profile.png') no-repeat center;
				background-size: 100% 100%;

				.user {
					@include f-between;
					align-items: flex-end;
					padding-left: $m24;
					position: relative;

					//变形:也可以用位置来调
					transform: translateY(-32rpx);

					.avatar {
						width: 160rpx;
						height: 160rpx;
						border: 4rpx solid #d3dff7;
						border-radius: 50%;
					}

					.info {
						flex: 1;
						margin: 0 0 0 $m24;
						padding: 10rpx 0 0 0;

						.name {
							padding-top: 10rpx;
							line-height: 50rpx;
							color: #fff;
							font-weight: bold;
							font-size: $font-32;
						}

						.level {
							font-size: $font-24;
							color: #e6e7eb;
						}

						.invite-person {
							font-size: $font-24;
							color: #e6e7eb;
						}
					}

					.vip {
						position: absolute;
						top: 120rpx;
						right: 0;
						background-color: #282828;
						padding: 0.1em 0.6em;
						border-radius: $radius-100 0 0 $radius-100;
					}
				}

				.role {
					position: absolute;
					top: 230rpx;
					right: 24rpx;

					.user-role {
						color: #282828;
						margin-right: 24rpx;
					}
				}

				.statis-column {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					padding: 0rpx 0rpx 50rpx 0;

					.item {
						display: flex;
						flex-direction: column;
						align-self: center;
						text-align: center;

						.label {
							font-size: $font-24;
							color: #fff;
						}

						.num {
							font-size: $font-36;
							color: #fff;
							font-weight: bold;
						}
					}
				}
			}

			&.secondary {
				padding: 0 $m24 $m24;
				overflow: hidden;

				.label {
					margin-top: $m12;
				}
			}

			&.cell-list {
				overflow: hidden;
				margin-bottom: 25rpx;

				.u-cell_title {
					color: #222a52;
				}
			}
		}

		.order-con {
			background: #fff;
			margin: 0 0 $m24 0;
			padding: 0 0 1rpx 0;
			border-radius: 16rpx;

			.card {
				.card-item {
					padding-top: 36rpx;

					image {
						width: 74rpx;
						height: 74rpx;
						display: block;
						margin: 0 auto;
					}
				}
			}
		}

		.service-menu {
			background: #fff;
			padding: 0 $m24;
			margin-bottom: $m24;
			border-radius: 16rpx;
		}
	}
</style>